<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* body {
        height: 1500px;
      } */
      #movableDiv {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="movableDiv"></div>
    <script>
      var div = document.getElementById("movableDiv");

      div.addEventListener("mousedown", function (event) {
          let  x = event.pageX-this.offsetLeft;
           let y  = event.pageY-this.offsetTop;
        // let mouseX = event.clientX;
        // let mouseY = event.clientY;
            document.addEventListener('mousemove',move)
            function move(e){
                div.style.left = e.pageX - x +'px';
                div.style.top = e.pageY - y + 'px';
            }
              document.addEventListener('mouseup',function(){
                document.removeEventListener('mousemove',move);
            })
        // div.style.left = mouseX-50 + "px";
        // div.style.top = mouseY-50 + "px";

      });
    </script>
  </body>
</html>
